<!doctype html>
<html lang="en">
{% load static %}

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>城市智能交通分析系统</title>
    <!-- css样式 -->
    <link type="text/css" rel="stylesheet" href="../static/bootstrap/css/bootstrap.css">
    <link type="text/css" rel="stylesheet" href="../static/css/sideBar.css">
    <link type="text/css" rel="stylesheet" href="../static/font-awesome/css/font-awesome.css" />
    <link href="../static/css/ol.css" rel="stylesheet" />
    <!-- js样式 -->
    <script type="text/javascript" src="{%static 'js/jquery-3.4.1.js'%}"></script>
    <script type="text/javascript" src="{%static 'bootstrap/js/bootstrap.js'%}"></script>
    <script type="text/javascript" src="{%static 'js/ol.js'%}"></script>
    <script type="text/javascript" src="{%static 'echart/5.11/echarts.js'%}"></script>
    <script type="text/javascript" src="{%static 'js/traffic.js'%}"></script>
</head>

<body class>
    <div class="container-fluid">
        <div class="row">
            <!-- 侧边栏 -->
            <div class="sidebar" style="background:#cfebf1">
				<h4 style="background:#8cb9c4; color: black; text-align: center; font-size:x-large;font-family:华文彩云">驾驶辅助决策系统</h4>
				<div class="cover" style="background:#68cae2; color:rgb(255, 255, 255)">
					<h2><img class="img-circle" src="../static/img/car.png" /></h2>
					<b style="color: black;">Hi~ 小主</b>
				</div>
				<ul class="sidenav animated fadeInUp">
					<!-- 一级标题 -->
					<li>
						<a class="withripple hover" href="javascript:;" style="background:#68cae2;  color:black ">
							<i class="fa  fa-user-circle" aria-hidden="true"></i>
							<span class="sidespan">司机辅助系统</span>
							<i class="iright pull-right">&gt;</i>
						</a>
						<ul class="sidebar-dropdown" >
							<li>
								<a id='route_plan' class="withripple" style="background:#68cae2;  color:black ">路径规划
								</a>
							</li>
						</ul>
					</li>
					<!-- 二级标题 -->
					<li>
						<a class="withripple" href="javascript:;" style="background:#afd9e4;  color:black ">
							<i class="fa fa-taxi" aria-hidden="true"></i>
							<span class="sidespan">区域综合分析</span>
							<i class="iright pull-right">&gt;</i>
						</a>
						<ul class="sidebar-dropdown">
							<li>
								<a id="hotpot_zone_analysis" class="withripple" style="background:#afd9e4; color:black">热点区域分析
								</a>
							</li>
							<li>
								<a id="network_module" class="withripple" style="background:#afd9e4;  color:black ">网络社区模块
								</a>
							</li>
						</ul>
					</li>
					<!-- 三级标题 -->
					<li>
						<a class="withripple hover" href="javascript:;" style="background:#68cae2;  color:black ">
							<i class="fa  fa-rocket" aria-hidden="true"></i>
							<span class="sidespan">城市辅助决策</span>
							<i class="iright pull-right">&gt;</i>
						</a>
						<ul class="sidebar-dropdown">
							<li>
								<a id="city_plan_analysis" class="withripple" style="background:#68cae2;  color:black ">上下车点周围查询
								</a>
							</li>
							<li>
								<a id="traffic_jam" class="withripple" style="background:#68cae2;  color:black ">拥堵路段分析
								</a>
							</li>
						</ul>
					</li>
					<!-- 四级标题 -->
					<li>
						<a class="withripple" href="javascript:;" style="background:#afd9e4;  color:black ">
							<i class="fa fa-truck" aria-hidden="true"></i>
							<span class="sidespan">司机情况概览</span>
							<i class="iright pull-right">&gt;</i>
						</a>
						<ul class="sidebar-dropdown">
							<li>
								<a id="track_recall" class="withripple" style="background:#afd9e4;  color:black ">危险驾驶行为回溯</a>
							</li>
						</ul>
					</li>
				</ul>
			</div>
            <!-- 主体部分  -->
            <div class="main">
                <!-- 上方标题 -->
                <div class="main-title">
                    <!-- 左侧下拉框 -->
                    <ul class="nav navbar-nav navbar-left navbar-side">
                        <li>
                            <a href="">
                                <i class="fa fa-sliders" aria-hidden="true"></i>
                            </a>
                        </li>
                    </ul>
                    <!-- 右侧下拉框 -->
                    <ul class="nav-right navbar-nav navbar-left navbar-side-right">
                        <li>
                            <a href="">
                                <i class="fa fa-bar-chart" aria-hidden="true"></i>
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- 右侧参数设置 -->
                <div class="sidebarright" style="background:#cfebf1">
					<h4 style="text-align: center; background: #5ec4dd;">参数设置</h4>
                    <button type="button" class="btn btn-primary btn-group btn-group-justified"
                        disabled="disabled">拥堵等级选择</button>
                    <select class="selectpicker btn-primary btn-group btn-group-justified" id="select1">
                        <optgroup label="拥堵分析">
                            <option>所有等级路段</option>>
                            <option class="btn btn-warning">畅行无阻路段</option>
                            <option class="btn btn-info">正常行驶路段</option>
                            <option class="btn btn-danger">严重拥堵路段</option>
                    </select>
                    <select class="selectpicker btn-warning btn-group btn-group-justified" id="select1">
                        <optgroup label="时间选择">
                            <option>11/05</option>>
                    </select>
                    <br />
                    <button type="button" class="btn btn-primary btn-group btn-group-justified"
                        onclick="tramSelect();">拥堵路段筛选</button>
                    <br />
                    <button type="button" class="btn btn-danger btn-group btn-group-justified"
                        disabled="disabled">道路信息可视化</button>
                    <br />
                    <div id='main'
                        style="width: 215px;height:215px;;background-color: rgb(2, 46, 90);margin-left: 0px;"></div>
                </div>
                <!-- 右侧框架 -->
                <div id="right_frame" style="background:#000080; color:#FFF">
                    <div id="map" style="width: 140%;height: 1000px;overflow: hidden;"></div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="{%static 'js/sideBar.js'%}"></script>
    <script type="text/javascript" src="{%static 'js/hotpot.js'%}"></script>
</body>
<script type="text/javascript">
    var localhost = '172.16.5.236'
    $("#route_plan").attr("href", "http://" + localhost + ":8000/web/route/");
    $("#hotpot_zone_analysis").attr("href", "http://" + localhost + ":8000/web/hotpot/")
    $("#network_module").attr("href", "http://" + localhost + ":8000/web/network/")
    $("#city_plan_analysis").attr("href", "http://" + localhost + ":8000/web/cityplan/")
    $("#traffic_jam").attr("href", "http://" + localhost + ":8000/web/traffic/")
    $("#track_recall").attr("href", "http://" + localhost + ":8000/web/trackrecall")
    $("#driving_feature").attr("href", "http://" + localhost + ":8000/web/drivingfeature/")
    //底图
    var raster = new ol.layer.Tile({
        // source: new ol.source.Stamen({
        //     layer: 'toner'
        // })
        source: new ol.source.OSM()
    });
    var map = new ol.Map({
        layers: [raster],
        target: 'map',
        view: new ol.View({
            center: ol.proj.fromLonLat([114.5, 30.5]),
            zoom: 10
        })
    });

    //矢量图层 获取geojson数据
    var track_url = "{{track_url}}";

    var vectorSource = new ol.source.Vector({
        url: track_url,
        format: new ol.format.GeoJSON({
            geometryName: 'geom'
        }),
        wrapx: false,
    })
    var vector = new ol.layer.Vector({
        source: vectorSource,
        //layer样式
        style: styleFunction
    });
    map.addLayer(vector);

    var Speed = 0;
    map.on('click', function (evt) {
        var pixel = map.getEventPixel(evt.originalEvent);
        var feature = map.forEachFeatureAtPixel(pixel, function (feature) {
            return feature;
        }); //判断当前单击处是否有要素，捕获到要素时弹出popup
        //捕获到缓冲区时右边显示POI相关信息
        var coordinate = evt.coordinate;
        if (feature !== undefined) {
            map.getOverlays().clear();
            var popup_element = document.createElement('div');
            popup_element.className = 'ol-popup';
            var closer = document.createElement('a');
            closer.href = '#';
            closer.className = 'ol-popup-closer';
            var title = document.createElement('div');
            title.className = 'title';
            var content = document.createElement('div');
            content.className = 'popup-content';
            $(popup_element).append(closer);
            $(popup_element).append(title);
            $(popup_element).append(content);
            var info_popup = new ol.Overlay(({
                element: popup_element,
                autoPan: true,
                autoPanAnimation: {
                    duration: 250 //当Popup超出地图边界时，地图移动的速度
                }
            }));
            map.addOverlay(info_popup);
            $(closer).on('click', function (event) {
                event.preventDefault();
                info_popup.setPosition(undefined);
            }); // 点击关闭的按钮
            var Name = feature.get("name");
            Speed = feature.get("speed");
            if (Name !== undefined) {
                //此点为轨迹点K均值聚类中心点
                title.innerHTML = '<div><strong style="background-color:red">道路名称和限速</strong>' + '</div></div>';
                content.innerHTML = '<div><div style="background-color:black">名称:' + Name + '  限速：' + Speed +
                    '</div></div>';
                info_popup.setPosition(coordinate);
            }



            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                series: [{
                    type: 'gauge',
                    startAngle: 180,
                    endAngle: 0,
                    min: 0,
                    max: 90,
                    splitNumber: 12,
                    itemStyle: {
                        color: '#58D9F9',
                        shadowColor: 'rgba(0,138,255,0.45)',
                        shadowBlur: 10,
                        shadowOffsetX: 2,
                        shadowOffsetY: 2
                    },
                    progress: {
                        show: true,
                        roundCap: true,
                        width: 18
                    },
                    pointer: {
                        icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
                        length: '75%',
                        width: 16,
                        offsetCenter: [0, '5%']
                    },
                    axisLine: {
                        roundCap: true,
                        lineStyle: {
                            width: 18
                        }
                    },
                    axisTick: {
                        splitNumber: 2,
                        lineStyle: {
                            width: 2,
                            color: '#999'
                        }
                    },
                    splitLine: {
                        length: 12,
                        lineStyle: {
                            width: 3,
                            color: '#999'
                        }
                    },
                    axisLabel: {
                        distance: 30,
                        color: '#999',
                        fontSize: 6
                    },
                    title: {
                        show: false
                    },
                    detail: {
                        backgroundColor: '#fff',
                        borderColor: '#999',
                        borderWidth: 2,
                        width: '60%',
                        lineHeight: 40,
                        height: 40,
                        borderRadius: 12,
                        offsetCenter: [0, '25%'],
                        valueAnimation: true,
                        formatter: function (value) {
                            return '{value|' + value.toFixed(0) + '}{unit|km/h}';
                        },
                        rich: {
                            value: {
                                fontSize: 15,
                                fontWeight: 'bolder',
                                color: 'red'
                            },
                            unit: {
                                fontSize: 15,
                                color: '#999',
                                padding: [0, 0, -20, 10]
                            }
                        }
                    },
                    data: [{
                        value: Speed
                    }]
                }]
            };

            myChart.setOption(option);
        }
    }); //为map添加点击事件监听，弹出popup
</script>

</html>